<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8"/>
	<title>穗麦商城注册页面</title>
	<script src="/static/reg/libs/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="/static/reg/js/jQuery/jquery-3.1.1.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/reg/bootStrap/bootstrap/css/bootstrap.css"/>
	<link rel="stylesheet" type="text/css" href="/static/reg/sass/index.css"/>
	<link rel="stylesheet" type="text/css" href="/static/reg/css/index.css">


</head>

<body>


<header>
	<a href="/"
	   class="logo"><img src="/static/reg/img/logo1.jpg" alt=""></a>
	<div class="desc">欢迎注册</div>
	<div class="dfg">
		<span>已有账号？</span>
		<a href="/auth/login.html">请登录</a>
	</div>
</header>
<section>
	<form action="/auth/register" method="post" class="one">
		<!--		<div style="color: red" th:text="${errors != null ? (#maps.containsKey(errors, 'msg') ? errors.msg : '') : ''}">-->
		<div class="register-box">
			<label class="username_label">用 户 名
				<input name="userName" maxlength="20" type="text" placeholder="您的用户名和登录名">
			</label>
			<div class="tips" style="color: red"
			     th:text="${errors != null ? (#maps.containsKey(errors, 'userName') ? errors.userName : '') : ''}">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">设 置 密 码
				<input name="password" maxlength="20" type="password" placeholder="建议至少使用两种字符组合">
			</label>
			<div class="tips" style="color: red"
			     th:text="${errors != null ? (#maps.containsKey(errors, 'password') ? errors.password : '') : ''}">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">确 认 密 码
				<input maxlength="20" type="password" placeholder="请再次输入密码">
			</label>
			<div class="tips">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">
				<span>中国 0086∨</span>
				<input name="phone" class="phone" id="phoneNum" maxlength="20" type="text" placeholder="建议使用常用手机">
			</label>
			<div class="tips" style="color: red"
			     th:text="${errors != null ? (#maps.containsKey(errors, 'phone') ? errors.phone : '') : ''}">

			</div>
		</div>
		<div class="register-box">
			<label class="other_label">验 证 码
				<input name="code" maxlength="20" type="text" placeholder="请输入验证码" class="caa">
			</label>
			<a id="sendCode" class=""> 发送验证码 </a>
			<div class="tips" style="color: red"
			     th:text="${errors != null ? (#maps.containsKey(errors, 'code') ? errors.code : '') : ''}">
			</div>
		</div>
		<div class="arguement">
			<input type="checkbox" id="xieyi"> 阅读并同意
			<a>《穗麦商城用户注册协议》</a>
			<a>《隐私政策》</a>

			<br/>
			<div class="submit_btn">
				<button type="submit" id="submit_btn">立 即 注 册</button>
			</div>
		</div>

	</form>

	<!--<div class="two">
		<div class="right_r">
			<div class="right_r1">
				<img src="/static/reg/img/a65a18e877a16246a92e1b755bd88a03_03.png"/>
				<span>企业用户注册</span>
			</div>
			<div class="right_r2">
				<img src="/static/reg/img/a65a18e877a16246a92e1b755bd88a03_06.png"/>
				<span>INTERNATIONAL <br/> CUSTOMERS</span>
			</div>
		</div>
	</div>-->
</section>
<br/><br/>
<hr>
<div class="footer">
	<ul>
		<li>
			<a href="#">关于我们</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">联系我们</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">人次招聘</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">商家入驻</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">广告服务</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">手机穗麦商城</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">友情链接</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">销售联盟</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">穗麦商城社区</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">穗麦商城公益</a>
		</li>
		<li>|</li>
		<li>
			<a href="#">English Site</a>
		</li>
	</ul>
</div>
<p class="bq">Copyright©2004-2016 穗麦商城suimai.com 版权所有</p>
<br/><br/>
<script type="text/javascript" charset="utf-8">

    $(function () {
    	$("#sendCode").click(function () {
			//2、倒计时
			if($(this).hasClass("disabled")) {
				//正在倒计时中
			} else {
				//1、给指定手机号发送验证码
				$.get("/auth/sms/sendCode?phone=" + $("#phoneNum").val(),function (data) {
					if(data.code != 0) {
						alert(data.msg);
					}
				});
				timeoutChangeStyle();
			}
		});
    });

    var num = 60;
    function timeoutChangeStyle() {
    	$("#sendCode").attr("class","disabled");
    	if(num == 0) {
			$("#sendCode").text("发送验证码");
			num = 60;
			$("#sendCode").attr("class","");
		} else {
			var str = num + "s 后再次发送";
			$("#sendCode").text(str);
			setTimeout("timeoutChangeStyle()",1000);
		}
		num --;
	}


</script>
</body>

</html>
